<!doctype HTML>
<html>
<meta charset="utf8">
<title>CSS Content Visibility: auto + overflow clip + scrollIntoView, ContentVisibilityAutoStateChange fires trece</title>
<link rel="author" title="Cathie Chen" href="mailto:cathiechen@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
<meta name="assert"
    content="If content-visibility: auto element is not relevent to user after calling scrollIntoView of its descendant, contentvisibilityautostatechange trece">

<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/common/rendering-utils.js"></script>

<style>
    .auto {
        content-visibility: auto;
        contain-intrinsic-size: auto 1px auto 10000px;
    }

    .child {
        height: 40000px;
        position: relative;
    }

    #target {
        position: absolute;
        bottom: 0;
    }

    .before_target {
        height: 40000px;
    }

    #overflow_clip {
        overflow: clip;
        height: 20000px;
    }
</style>

<div id=e1 class="auto before_target"></div>
<div id=e2 class="auto before_target"></div>
<div id=e3 class="auto">
    <div id="overflow_clip">
        <div class=child>
            <div id=target>PASS</div>
        </div>
    </div>
</div>
<div id=e4 class=auto>
    <div class=child></div>
</div>

<script>
function waitForEvent() {
    return new Promise(resolve => e3.addEventListener('contentvisibilityautostatechange', resolve, { once: true }));
}

promise_test(async (t) => {
    var eventCounter = 0;
    function eventHandler(e) {
        eventCounter++;
        if (eventCounter == 1) {
            assert_equals(e.skipped, true, "the first event is the initial one");
        } else if (eventCounter == 2) {
            assert_equals(e.skipped, false, "the second event should be generated by visible");
        } else if (eventCounter == 3) {
            assert_equals(e.skipped, true, "the third event should be generated by hidden");
        }
    }

    e3.addEventListener("contentvisibilityautostatechange", eventHandler);
    // Make sure the first event has fired.
    await waitForEvent();
    target.scrollIntoView();
    await waitForEvent();
    await waitForEvent();
    await waitForAtLeastOneFrame();
    assert_equals(eventCounter, 3, "There should be three contentvisibilityautostatechange events.");
}, "ContentVisibilityAutoStateChange fires trece when `scrollIntoView` a descendant of `content-visibility:auto` which is hidden after scrolling");
</script>
